<template>
  <div>
    <!--增加-->
    <div class="tools-con1">
      <ul class="tools1 tools">
        <li class="add"  @click="open1 = true"><span>增加</span></li>
      </ul>
    </div>
    <Modal
      title="新增医生"
      v-model="open1"
      :mask-closable="false">
      <div>
        <p class="p">姓名:<Input v-model="value" placeholder="请输入姓名" style="width: 90%" /></p>
        <p class="p">科室:<Input v-model="value" placeholder="请输入科室" style="width: 90%" /></p>
        <p class="p">医院:<Input v-model="value" placeholder="请输入医院" style="width: 90%" /></p>
      </div>
    </Modal>

    <!--删除-->
    <div class="tools-con2">
      <ul class="tools2 tools">
        <li class="del"  @click="open2 = true"><span>删除</span></li>
      </ul>
    </div>
    <Modal
      title="删除"
      v-model="open2"
      :mask-closable="false">
      <p>是否确认删除？</p>
    </Modal>
    <!--修改-->
    <div class="tools-con3">
      <ul class="tools3 tools">
        <li class="change"  @click="open3 = true"><span>修改</span></li>
      </ul>
    </div>
    <Modal
      title="修改"
      v-model="open3"
      :mask-closable="false">
      <div>
        <p class="p">姓名:<Input v-model="value" placeholder="请输入姓名" style="width: 90%" /></p>
        <p class="p">科室:<Input v-model="value" placeholder="请输入科室" style="width: 90%" /></p>
        <p class="p">医院:<Input v-model="value" placeholder="请输入医院" style="width: 90%" /></p>
      </div>
    </Modal>


    <div :class="item.toolscon" v-for="item in items">
      <ul :class="item.tools" class="tools">
        <li :class="item.class"><span>{{item.name}}</span></li>
      </ul>
    </div>


  </div>
</template>

<script>
  export default{
    data(){
      return {
        open1: false,
        open2: false,
        open3: false,
        value: '',
        items: [
/*          {toolscon:'tools-con1',tools:'tools1',class:'add',name:'增加'},
          {toolscon:'tools-con2',tools:'tools2',class:'del',name:'删除'},
          {toolscon:'tools-con3',tools:'tools3',class:'change',name:'修改'},*/
          {toolscon:'tools-con4',tools:'tools4',class:'speak',name:'作为讲者'}
        ]
      }
    }
  }
</script>

<!-- 样式 -->
<style scoped>
  @import '../../assets/index.css';
  .tools>li{
    color: #fff;
    list-style-type:none;
    padding: 0 8px 0 40px;
    border: 2px solid #fff;
    line-height: 40px;
    border-radius: 3px;
    font-size: 18px;
  }
  /*一*/
  .tools-con1{
    position: absolute;
    right: 0;
    overflow: hidden;
    z-index: 99;
  }
  .tools1{
    margin-right: -47px;
  }
  .tools1:hover{
    width: 150px;
  }
  /*二*/
  .tools-con2{
    position: absolute;
    right: 0;
    top: 50px;
    overflow: hidden;
    z-index: 99;
  }
  .tools2{
    margin-right: -47px;
  }
  .tools2:hover{
    width: 150px;
  }
  /*三*/
  .tools-con3{
    position: absolute;
    right: 0;
    top: 100px;
    overflow: hidden;
    z-index: 99;
  }
  .tools3{
    margin-right: -47px;
  }
  .tools3:hover{
    width: 150px;
  }
  /*四*/
  .tools-con4{
    position: absolute;
    right: 0;
    top: 150px;
    overflow: hidden;
    z-index: 99;
  }
  .tools4{
    margin-right: -83px;
  }
  .tools4:hover{
    width: 210px;
  }
  .p{
    padding: 10px 0;
    font-size: 15px;
  }
</style>
<style>
  .ivu-input-wrapper{
    padding-left: 20px;
  }
</style>
